<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="testAjax"> Test ajax </button>
    <button @click="testAjaxError"> Test ajax error </button>
    <button @click="setToken"> Set Token </button>
    <button @click="resetToken"> Reset Token </button>
  </div>
</template>

<script>
  import {updateToken} from '@/utils/apiUtil'
  import appApi from '@/api/appApi'
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to My Index App'
      }
    },
    methods: {
      testAjax () {
        appApi.getAppInfo(data => {
          console.dir(data)
        }, error => {
          console.dir(error)
        })
        /*
        this.$http.get('app/info').then(res => {
          console.dir(res)
        }) */
      },
      testAjaxError () {
        this.$http.get('app/error').then(res => {
          console.dir(res)
        })
      },
      setToken () {
        sessionStorage.setItem('token', '123456')
        updateToken(this.$http)
      },
      resetToken () {
        sessionStorage.removeItem('token')
        updateToken(this.$http)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
